<template>
	<xbd-pages-content :title="title">
		<!-- #ifdef APP-PLUS || H5 --> 
		<template #default>
			<uni-nav-bar left-icon="back" @clickLeft="clickLeft" color="#394954" backgroundColor="#F8F8F8">
				<template #default>
					<view class="title">
						{{ title }}
					</view>
				</template>
			</uni-nav-bar>
		</template>
		<!-- #endif -->
		<template #content>
			<view v-if="code==='40040'" class="cencal">
				<image class="image" src="../../static/images/msg_cencal2.png" mode=""></image>
			</view>
			<view v-else class="article-details">
				<view class="article-details-title">
					{{ articleDetails.hotpoint_title }}
				</view>
				<view class="time-name">
					<view class="time">
						{{ articleDetails.hotpoint_publish_time | timeFormat('YYYY-MM-DD HH:mm') }}
					</view>
					<view class="name">
						发布人：{{ articleDetails.hotpoint_author }}
					</view>
				</view>
				<parser :html="articleDetails.hotpoint_content" :tagStyle='style'/>
				<!-- #ifdef APP-PLUS || H5 -->
				<audio
					class="audio-ctrl"
					controls
					v-for="(item, index) in articleDetails.hotpoint_audio"
					:key="index"
					:name="item.name"
					author="暂无"
					:src="item.url | imgFormat"
				></audio>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<dd-audio-player
					:audioList="articleDetails.hotpoint_audio"
					v-if="articleDetails.hotpoint_audio.length"
				></dd-audio-player>
				<!-- #endif -->
				<view class="see-num">
					<view class="see">
						<image class="see-img" src="@/static/images/common/see.svg" mode=""></image>
						<text>{{ articleDetails.hotpoint_pv }}</text>
					</view>
					<view class="from">
						来源：{{ articleDetails.hotpoint_source }}
					</view>
				</view>
			</view>
			
		</template>
	</xbd-pages-content>
</template>

<script>
	import parser from '@/components/jyf-parser/jyf-parser.vue';
	import DdAudioPlayer from '@/components/hotspot/DdAudioPlayer.vue';
	import { Hotpoint } from '@/api/index.js';
	export default {
		data() {
			return {
				style: {
				    'img': 'display:block;margin: 0 auto;max-width:100%;height:auto; transform: translateX(0);',
				},
				articleDetails: {},
				code:'',
				title: ''
			};
		},
		components: {
			parser, DdAudioPlayer
		},
		methods: {
			clickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getDetails(id) {
				try {
					this.$showLoading('加载中');
					const res = await Hotpoint.getHotSpotDetail(id);
					this.code = res.code
					uni.hideLoading();
					this.articleDetails = res.data.data;
				}catch(e) {
					
				}
			},
			editTitle() {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		onLoad(res) {
			this.title = res.title;
			// #ifndef APP-PLUS || H5
			this.editTitle();
			// #endif
			this.getDetails(res.id);
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-audio-default {
		min-width: 650rpx;
		max-width: 650rpx;
	}
	::v-deep .dd-audio-player {
		margin-top: 10px;
	}
	::v-deep .uni-navbar__header-container.uni-navbar__content_view {
		justify-content: center;
	}
	.cencal{
			padding: 1px 0;
			width: 750rpx;
			.image{
				display: block;
				margin: 200rpx auto;
				width: 460rpx;
				height: 460rpx;
			}
		}
	.title {
		width: 7em;
		text-align: center;
		
		// font-size: 18px;
		
		overflow: hidden;/*超出部分隐藏*/
		text-overflow:ellipsis;/* 超出部分显示省略号 */
		white-space: nowrap;/*规定段落中的文本不进行换行 */
	}
	.article-details {
		padding: 20px 50rpx;
		
		background-color: #FFFFFF;
		&-title {
			margin-bottom: 10px;
			
			font-size: 14px;
			
			color: $uni-text-color;
			
			// overflow: hidden;/*超出部分隐藏*/
			// text-overflow:ellipsis;/* 超出部分显示省略号 */
			// white-space: nowrap;/*规定段落中的文本不进行换行 */
		}
		.time-name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin-bottom: 20px;
			
			font-size: 12px;
			
			color: #999999;
		}
		.audio-ctrl {
			margin-top: 20rpx;
			width: 650rpx;
		}
		.see-num {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin-top: 20px;
			
			font-size: 12px;
			
			color: #999999;
			.see {
				display: flex;
				align-items: center;
				&-img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
